<template>
  <div>
    <a-tabs default-active-key="1" @change="callback" size="large">
      <a-tab-pane key="1" tab="我的证书">
        <div style="overflow: hidden">
          <div class="coRsingleCF">
            <div
              class="listDiv"
              v-for="(item, index) in certificateList"
              :key="index"
            >
              <div class="img-box">
                <img
                  class="image1"
                  :src="imageWebUrl + item.certificateImg"
                  @error="$event.target.src = GLOBAL.defaultCover"
                  alt=""
                />
              </div>
              <div class="mtitleTxt" style="margin-top: 14px">
                {{ item.name }}
              </div>
              <div
                class="smallPrint"
                style="margin-top: 16px; margin-left: 16px"
              >
                {{ item.gainDate }}获得
              </div>
            </div>
          </div>
          <!-- 分页器 -->
          <a-pagination
            style="text-align: center; margin-top: 30px"
            v-model="current"
            :total="total"
            :hideOnSinglePage="true"
            :pageSize="pageSize"
            @change="changePagin"
            show-less-items
          />
          <a-empty
                :image="imgUrl"
                :image-style="{
                height: '220px',
                }"
                style="margin: 0 auto; margin-top: 88px"
                v-if="certificateList.length < 1 && flag"
            />
        </div>
      </a-tab-pane>
    </a-tabs>
    <Loading v-show="onLoading"></Loading>
  </div>
</template>



<script>
export default {
  data() {
    return {
      imgUrl: require("@/assets/image/pagint.png"),
      titleList: [
        { name: "全部" },
        { name: "学历教育" },
        { name: "特殊教育" },
        { name: "职业技能教育" },
        { name: "艺术教育" },
        { name: "综合教育" },
      ],
      current: 1,
      total:0,
      pageSize:6,
      pageIndex:1,
      certificateList:[],
      flag:false,
      onLoading:false
    };
  },
  mounted() {
    this.getCertificateList();
  },
  methods: {
    callback(key) {},
    changePagin(e) {
      this.pageIndex = e;
      this.getCertificateList();
    },
    // 获取证书列表
    getCertificateList() {
      this.onLoading = true
      this.$ajax({
        url:
          "/user/certificateinfo/list?pageSize=" +
          this.pageSize +
          "&pageIndex=" +
          this.pageIndex,
        method: "post",
        params: {},
      }).then((res) => {
        this.flag = true;
        if (res.code == 200) {
          this.onLoading = false
          this.certificateList = res.data.list;
          this.total = res.data.totalCount;
        }else{
          this.onLoading = false
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
.listDiv {
  width: 290px;
  height: 317px;
  padding-bottom: 16px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
  // float: left;
  margin-left: 26px;
  margin-bottom: 24px;
  .image1 {
    width: 280px;
    height: 212px;
    margin: 0 auto;
  }
}
.listDiv:nth-child(3n-2) {
  margin-left: 0px;
}
.mtitleTxt {
  display: inline-block;
  font-size: 15px;
  font-family: PingFang SC;
  color: #333333;
  line-height: 21px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 0px 16px;
}
/deep/.ant-tabs-nav .ant-tabs-tab-active {
  color: #333333;
  text-shadow: 0 0 0.25px currentColor;
  font-weight: 600;
}
</style>
